<template>
  <div
    class="title"
    data-aos="flip-up"
    data-aos-easing="ease-out-cubic"

  >
    <span class="maintitle">{{ props.maintitle }}</span>
    <span class="subtitle">{{ props.subtitle }}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  maintitle: {
    type: String,
    default: '主标题',
  },
  subtitle: {
    type: String,
    default: 'Subtitle',
  },
});
console.log(props);
</script>

<style lang="less" scoped>
.title {
  display: flex;
  flex-direction: column;
  width: 680px;
  // 字体阴影
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

  .maintitle {
    font-size: 72px;
    font-weight: 400;
    z-index: 1;
    color: #2e2e2e;
  }
  .subtitle {
    font-size: 56px;
    font-weight: 300;
    color: #ffffff;
    margin-top: -52px;
    // YuMincho +36p Kana字体
    font-family: YuMincho, '游明朝', '游明朝体', 'Yu Mincho', 'YuMincho-Heavy';
  }
}
</style>
